<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
	
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				if(document){
					canvas = document.querySelector('#myCanvas');
					gPaint.isMobile = facecat.isMobileMode();
					facecat.addDefaultEvent(canvas, gPaint);
				}else{
					canvas = uni.createSelectorQuery('#myCanvas');
					gPaint.isMobile = true;
				}
				//注册事件
				uni.getSystemInfo({ 
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
					try {
						this.widthEle = res.size.windowWidth;
						this.heightEle = res.size.windowHeight;
						let canvas = null;
						if(document){
							canvas = document.querySelector('#myCanvas');
						}else{
							canvas = uni.createSelectorQuery('#myCanvas');
						}
						canvas.width = this.widthEle;
						canvas.height = this.heightEle;
						facecat.updateViewDefault(gPaint.views);
					} catch (err) {
					}
					facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill" type="tab" selectedindex="0">
					  <div name="TabPage" text="左右" type="tabpage">
						<div type="splitlayout" layoutstyle="LeftToRight" size="200,200" splitterposition="100,1" name="SplitLayoutDiv" text="SplitLayoutDiv" location="147,250" dock="Fill">
						  <div name="Div" size="200,100" backcolor="rgb(59,174,218)" />
						  <div name="Div2" size="200,100" backcolor="rgb(150,123,220)" />
						</div>
					  </div>
					  <div name="TabPage2" text="右左" type="tabpage">
						<div type="splitlayout" layoutstyle="RightToLeft" size="200,200" splitterposition="100,1" name="SplitLayoutDiv" text="SplitLayoutDiv" location="147,250" dock="Fill">
						  <div name="Div" size="200,100" backcolor="rgb(59,174,218)" />
						  <div name="Div2" size="200,100" backcolor="rgb(150,123,220)" />
						</div>
					  </div>
					  <div name="TabPage3" text="上下" type="tabpage">
						<div type="splitlayout" layoutstyle="TopToBottom" size="200,200" splitterposition="100,1" name="SplitLayoutDiv" text="SplitLayoutDiv" location="147,250" dock="Fill">
						  <div name="Div" size="200,100" backcolor="rgb(59,174,218)" />
						  <div name="Div2" size="200,100" backcolor="rgb(150,123,220)" />
						</div>
					  </div>
					  <div name="TabPage4" text="下上" type="tabpage">
						<div type="splitlayout" layoutstyle="BottomToTop" size="200,200" splitterposition="100,1" name="SplitLayoutDiv" text="SplitLayoutDiv" location="147,250" dock="Fill">
						  <div name="Div" size="200,100" backcolor="rgb(59,174,218)" />
						  <div name="Div2" size="200,100" backcolor="rgb(150,123,220)" />
						</div>
					  </div>
					</div>
				  </body>
				</html>
				`;
				facecat.renderFaceCat(gPaint, xml);
		},
		methods: {
			touchStartCanvas: function (e) {
				facecat_uni.handleTouchStart(gPaint, e, null);
			},touchMoveCanvas: function (e) {
				facecat_uni.handleTouchMove(gPaint, e, null);
			},touchEndCanvas: function (e) {
				facecat_uni.handleTouchEnd(gPaint, e, null, null);
			}
		}
	}
</script>

<style>
</style>
